<template>
  <view
    class="my-search-container"
    :style="{ backgroundColor: bgColor }"
    @click="onClick"
  >
    <view class="my-search-box">
      <!-- 左边搜索小图标uni-icons 第三方插件找 -->
      <uni-icons type="search" size="17"></uni-icons>
      <!-- placeholder文字是父组件传过来的，没传即默认值 -->
      <!-- 右边提示文字 -->
      <text class="placeholder">{{ placeholder }}</text>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: "#c00000",
    },
    placeholder: {
      type: String,
      default: "搜索",
    },
  },
  methods: {
    onClick() {
      //   this.$emit('myevent', {
      //     name: '黄Sir',
      //     address: {
      //       province: '广东',
      //       city: '深圳'
      //     }
      //   })

      // 跳转到搜索页面  这里不用加$
      uni.navigateTo({
        // 记得路径要有根文件名/subpkg
        url: "/subpkg/search/index",
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.my-search-container {
  //   background-color: #c00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}
</style>
